<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>title</title>
</head>

<body>
    <ul id="t">
        <li class="classname">avc</li>
        <li>cac</li>
        <li>aca</li>
    </ul>
    <table id="table">

        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>caozuo</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

<script>
    // document.getElementById("t");
    // document.getElementsByTagName("ul")[0];

    function p(str){
        console.log(str);
    }
    let ul = document.querySelector("#t");
    console.log(ul);
    let data = [{
            id: 1,
            name: 'john',
            age: 100
        }, {
            id: 2,
            name: 'zh',
            age: 10
        },
        {
            id: 3,
            name: 'ohn',
            age: 130
        }, {
            id: 4,
            name: 'jozn',
            age: 140
        }
    ]



    function UserManager(data) {
        this.data = data;
        this.deleteUser = function (e, u) {
            let index = this.data.indexOf(u)
            this.data.splice(index, 1);
            this.render(table);
        }
        this.addUser = function (e, u) {
            data.push(u);
            this.render();
        }
        this.modifyUser = function (e, u) {
            let inputs = e.target.parentElement.getElementsByTagName('input');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].disabled = false;
            }
        }
        this.saveUser = function (e, u) {
            let index = this.data.indexOf(u);
            let inputs = e.target.parentElement.parentElement.getElementsByTagName("input");
            let new_user = {};
            new_user.id = parseInt(inputs[0].value);
            new_user.name = inputs[1].value;
            new_user.age = parseInt(inputs[2].value);
            this.data.splice(index, 1);
            console.log(data);
            this.data.splice(index, 0, new_user);
            this.render(table);
        }
        this.render = function (table) {
            let tbody = table.getElementsByTagName("tbody")[0];
            tbody.remove();
            tbody = document.createElement("tbody");
            let saveBtn = document.createElement('button');
            let tr = document.createElement('tr');
            let td = document.createElement('td');
            let addBtn = document.createElement('button');
            saveBtn.textContent = "save";
            addBtn.textContent = "add";
            tr.appendChild(td);
            td.appendChild(saveBtn);
            td.appendChild(addBtn);
            tbody.appendChild(tr);
            addBtn.addEventListener("click", (e1) => {
                let tr = document.createElement('tr');
                for (let i = 0; i < 3; i++) {
                    let td = document.createElement('td');
                    let input = document.createElement('input');
                    input.setAttribute("type", "text");
                    input.disabled = false;

                    td.appendChild(input);
                    tr.appendChild(td);
                }
                let td = document.createElement('td');
                let okBtn = document.createElement('button');
                okBtn.textContent = "ok";
                tr.appendChild(okBtn);
                tbody.appendChild(tr);
                okBtn.addEventListener("click", (e) => {
                    console.log(e.target);
                    let inputs = e.target.parentElement.getElementsByTagName("input");
                    let new_user = {};
                    new_user.id = parseInt(inputs[0].value);
                    new_user.name = inputs[1].value;
                    new_user.age = parseInt(inputs[2].value);
                    console.log(new_user);
                    this.data.push(new_user);
                    console.log(this.data);
                    this.render(table);
                });
            });

            data.forEach((user) => {
                let tr = document.createElement('tr');
                for (varble in user) {
                    let td = document.createElement('td');
                    let input = document.createElement('input');
                    input.setAttribute("type", "text");
                    input.disabled = true;
                    input.value = user[varble];
                    input.setAttribute("name", varble);
                    td.appendChild(input);
                    tr.appendChild(td);
                }

                tr.addEventListener("dblclick", (e1) => {
                    let inputs = e1.target.parentElement.parentElement.getElementsByTagName("input");
                    for (let i = 0; i < inputs.length; i++) {
                        inputs[i].disabled = false;
                    }
                    saveBtn.remove();
                    saveBtn = document.createElement('button');
                    saveBtn.textContent = "save";
                    tbody.firstElementChild.firstElementChild.appendChild(saveBtn);
                    saveBtn.addEventListener("click", (e) => {
                        this.saveUser(e1, user);
                    });
                })
                let deleteBtn = document.createElement('button');
                let modifyBtn = document.createElement('button');
                deleteBtn.textContent = 'delete';
                deleteBtn.addEventListener("click", (e) => {
                    this.deleteUser(e, user);
                });
                tr.appendChild(deleteBtn);
                tbody.appendChild(tr);
            })
            table.appendChild(tbody)
        }
    }

    new UserManager(data).render(document.querySelector('#table'));

    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/users", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let users = JSON.parse(xhr.responseText);
            console.log(users);
        }
    }
    xhr.send();
</script>

</html>